import { IThemeColor } from '../../../../type/index';

export const initBar = (echarts: any, dom: HTMLElement, dataList: number[], workAreaList: string[], themeColor: IThemeColor) => {
  const charts = echarts.init(dom);
  charts.setOption({
    title: {
      text: '各就业城市人数统计',
      textStyle: {
        color: themeColor.font,
        fontSize: 16,
        fontWeight: 'normal',
      },
      padding: [16, 0, 0, 16],
    },
    tooltip: {
      showContent: true,
      trigger: 'axis',
      backgroundColor: 'rgba(8,36,68,.7)',
      textStyle: {
        color: '#fff',
        // color: themeColor.font,
      },
      axisPointer: {
        type: 'shadow',
        shadowStyle: {
          opacity: 0.5,
        },
      },
    },
    grid: {
      left: '5%',
      right: '5%',
      top: '20%',
      bottom: '20%',
      // width: 250,
    },
    yAxis: [
      {
        show: true,
        type: 'value',
        axisLabel: {
          // color: '#A7D6F4',
          color: themeColor.font,
          fontSize: 14,
          margin: 20,
        },
      },
    ],
    //x轴
    xAxis: [
      {
        show: true,
        type: 'category',
        axisTick: {
          show: true,
          alignWithLabel: true,
        },
        data: workAreaList,
        // data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        axisLabel: {
          // color: '#A7D6F4',
          color: themeColor.font,
          fontSize: 14,
          margin: 20,
          // formatter: function (value: string) {
          //   if (value.length > 5) {
          //     return value.substring(0, 5) + '...';
          //   } else {
          //     return value;
          //   }
          // },
        },
      },
    ],
    series: [
      {
        name: '该城市就业人数',
        type: 'bar',
        barWidth: 35, // 柱子宽度
        label: {
          show: true,
          // color: '#A7D6F4',
          color: themeColor.font,
          fontSize: 14,
          distance: 5, // 距离
          position: 'top',
        },
        itemStyle: {
          borderRadius: [2, 2, 2, 2], // 圆角（左上、右上、右下、左下）
          color: {
            type: 'linear',
            x: 1,
            y: 0,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: '#159dd2',
              },
              {
                offset: 0.5,
                color: '#2db6ce',
              },
              {
                offset: 1,
                color: '#48d0ca',
              },
            ],
            global: false, // 缺省为 false
          },
        },
        data: dataList,
      },
    ],
  });
};
